import { Anchor, Blockquote, Grid, GridCol, Group, Image, Space, Text } from "@mantine/core";
import { Person } from "../../models/Persons";
import { IconInfoSquareRoundedFilled } from "@tabler/icons-preact";

export default function UserCard({ person }: { person: Person | undefined }) {
	const img = `images\\photo\\${person?.id}.jpg`;
	const icon = <IconInfoSquareRoundedFilled />;
	const missingPhoto = "https://placehold.co/300x400?text=PhotoNotFound";

	return (
		<Grid align="center">
			<GridCol span={0}>
				<Image src={img} w={300} fallbackSrc={missingPhoto} />
			</GridCol>
			<Space />
			<GridCol span="auto" >
				<Blockquote iconSize={30} color="blue" icon={icon} cite={person?.missingInfo} >
					<Group>
						<Text c="dimmed">имя:</Text>
						<Text>{person?.name}</Text>
					</Group>
					<Group>
						<Text c="dimmed">день рождения:</Text>
						<Text>{person?.birthDay}</Text>
					</Group>
					<Group>
						<Text c="dimmed">отдел:</Text>
						<Text>{person?.department}</Text>
					</Group>
					<Group>
						<Text c="dimmed">должность:</Text>
						<Text>{person?.position}</Text>
					</Group>
					<Group>
						<Text c="dimmed">почта:</Text>
						<Anchor>{person?.mail}</Anchor>
					</Group>
					<Group>
						<Text c="dimmed">раб. телефон:</Text>
						<Text>{person?.workPhone}</Text>
					</Group>
					<Group>
						<Text c="dimmed">моб. телефон:</Text>
						<Text>{person?.cellPhone}</Text>
					</Group>
				</Blockquote>
			</GridCol>
		</Grid>
	)
}
